<template>
	<body-wrap isFlex>
		<view class="formBox">
			<view class="formItemBox">
				<radio-group @change="radioChange">
					<view class="rdgbox">
						<view class="rditem">
							<radio :value="1" :checked="fmData.type==1" /> <view>一对一预约咨询</view> 
						</view>
						<view class="rditem">
							<radio :value="2"  :checked="fmData.type==2"/> <view>线下咨询</view> 
						</view>
					</view>
				</radio-group>
			</view>
			<view class="formItemBox">
				<view class="title">*标题</view>
				<view class="fmipbox">
					<input class="myInput" v-model="fmData.title" placeholder="请输入标题" />
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">*话题描述</view>
				<view class="fmipbox fmipbox2">
					<textarea class="myTextarea" v-model="fmData.content" placeholder="请输入描述" />
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">所属分类</view>
				<view class="fmipbox">
					<category-select v-model="classfly" placeholder='请选择分类' popupTitle="分类"/>
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">日期</view>
				<view class="fmipbox fmipbox4">
					<uni-datetime-picker type="daterange" rangeSeparator="至" :clear-icon="false" v-model="cDates"/>
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">*时间</view>
				<view class="timebox">
					<view class="fmipbox" @click="openTime(1)">
						<input class="myInput" v-model="fmData.startTime" disabled placeholder="开始时间" />
					</view>
					<view class="fmipbox" @click="openTime(2)">
						<input class="myInput" v-model="fmData.endTime" disabled placeholder="开始时间" />
					</view>
				</view>
			</view>
			<view class="formItemBox" v-if="fmData.type==2">
				<view class="title">*地址</view>
				<view class="fmipbox">
					<input class="myInput" v-model="fmData.address" placeholder="请输入线下咨询详情地址" />
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">*可预约人数</view>
				<view class="fmipbox">
					<input class="myInput" type="number" v-model="fmData.limit" placeholder="请输入可预约人数" />
				</view>
			</view>
			<view class="formItemBox">
				<view class="title">*咨询价格(元/人)</view>
				<view class="fmipbox">
					<input class="myInput" type="digit" v-model="fmData.price" placeholder="请输入咨询价格" />
				</view>
			</view>
		</view>
		<template #footer>
			<view class="footer-btn-box">
				<view class="myBtn" @click="save">提交</view>
				<!-- <navigator class="myBtn" url="/pages/home/consult/sendList">提交</navigator> -->
			</view>
		</template>
		<uv-datetime-picker ref="timePicker" v-model="time" mode="time" @confirm="timeConfirm"/>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import categorySelect from "@/components/categorySelect/index.vue"
	import {addConsult} from "@/api/consult.js"
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			bodyWrap,
			categorySelect
		},
		props:{
		
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				userInfo:computed(()=>store.state.base.userInfo),
				fmData:{type:1},
				time:'',
				flag:1,
				classfly:'',
				cDates:''
			})
			
			onMounted(()=>{
				
			})
			
			const radioChange =(e)=> {
				console.log(e);
				state.fmData.type = e.detail.value
			}

			const openTime = (num)=>{
				state.flag = num
				proxy.$refs.timePicker.open()
			}
			
			
			const timeConfirm = (e)=>{
				if(state.flag == 1){
					state.fmData.startTime = e.value
				}else{
					state.fmData.endTime = e.value
				}
			}
			
			const save = async ()=>{
				if(!state.fmData.title){
					return toast('请输入标题')
				}else if(!state.fmData.content){
					return toast('请输入咨询的话题')
				}else if(!state.fmData.content){
					return toast('请输入咨询的话题')
				}else if(!state.fmData.startTime){
					return toast('请输入开始时间')
				}else if(!state.fmData.endTime){
					return toast('请输入结束时间')
				}else if(!state.fmData.limit){
					return toast('请输入可预约人数')
				}else if(!state.fmData.price){
					return toast('请输入价格')
				}else if(state.fmData.type==2 && !state.fmData.address){
					return toast('请输入线下咨询地址')
				}
				if(state.cDates){
					state.fmData.startDate = state.cDates[0]+' 00:00:00'
					state.fmData.endDate = state.cDates[1]+' 00:00:00'
				}
				if(state.classfly){
					state.fmData.classifyIds = [state.classfly]
				}
				
				// console.log("cDates:",state.cDates)
				// console.log("classfly:",state.classfly)
				// console.log("fmData:",state.fmData)
				
				const res = await addConsult({
					teacherId:state.userInfo._id,
					...state.fmData
				})
				if(res.code != 200){
				 return	toast('添加失败')
				}
				toast('添加成功')
				setTimeout(()=>{
					uni.redirectTo({
						url:'/pages/home/consult/sendList'
					})
				},2000)	
			}
			
			return {
				...toRefs(state),
				radioChange,
				openTime,
				timeConfirm,
				save
			}
		}
	})
</script>

<style lang="scss" scoped>
	.formBox{
		padding:0 20rpx 20rpx 20rpx;
	}
	.formItemBox{
		margin: 20rpx 0 0 0;
		.rdgbox{
			display: flex;
			padding: 20rpx 0 10rpx 0;
			.rditem{
				display: flex;
				align-items: center;
				&+.rditem{
					margin-left: 40rpx;
				}
			}
		}
		.title{
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			height: 70rpx;
			&:before{
				content: '';
				display: block;
				width: 7rpx;
				height: 30rpx;
				background: #e3af2f;
				margin: 0 10rpx 0 0;
			}
		}
		.fmipbox{
			box-sizing: border-box;
			border: 1px solid #e5e5e5;
			border-radius: 5px;
			height: 70rpx;
			padding: 0 15rpx;
			background: #fff;
			&.fmipbox2{
				height: auto;
			}
			&.fmipbox3{
				height: auto;
				border: none;
				padding-top: 20rpx;
				padding-bottom: 20rpx;
			}
			&.fmipbox4{
				padding: 0;
				border: 0;
			}
			&.fmipbox5{
				display: flex;
				align-items: center;
			}
			.myInput{
				width: 100%;
				height: 100%;
			}
			.myTextarea{
				width: 100%;
				height: 250rpx;
				padding: 15rpx;
			}
			.itemrbbox{
				display: flex;
				&+.itemrbbox{
					margin-top: 20rpx;
				}
				.fmtips{
					font-size: 26rpx;
					color: #999;
				}
			}
		}
		.timebox{
			display: flex;
			.fmipbox{
				flex: 1;
				&+.fmipbox{
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
